<script type="text/javascript" src="js/jquery.js" ></script>
<script  type="text/javascript" type="text/javascript">

$(document).ready(function() {
	
	$("#search").click(function() {
		$("#loading").css("display","inline");
		$("#azione").val("search");
		$.ajax({ url: './search.php',
			data: $("#modulo").serialize(),
			type: 'post',
			success: function(output) {
				var res = $.parseJSON(output);
				alert($("#azione").val()+"\n"+res);
				$("#loading").css("display","none");
			}
		});
	});
	
	$("#clear").click(function() {
	     $("#modulo")[0].reset();
	});	
});

</script>
<html>
<body>
	<div id="container">
	<form id="modulo" name="modulo">
		<input type="hidden" id="azione" name="azione" value=""></input>
		
		<div id="size">Size
		<input type="radio" name="size" value="M10"/>M10
		<input type="radio" name="size" value="M12"/>M12
		<input type="radio" name="size" value="M20"/>M20
		<input type="radio" name="size" value="M30"/>M30
		</div>
		
		<div id="length">Length
		<input type="radio" name="len" value="10"/>10
		<input type="radio" name="len" value="12"/>12
		<input type="radio" name="len" value="14"/>14
		<input type="radio" name="len" value="20"/>20
		</div>
		
		<div id="base">Base
		<input type="radio" name="base" value="10"/>10
		<input type="radio" name="base" value="20"/>20
		<input type="radio" name="base" value="30"/>30
		<input type="radio" name="base" value="40"/>40
		</div>
		<br/>
		<input id="clear" name="clear" type="button" value="Reset" />
		<input id="search" name="search" type="button" value="Search" />
	</form>
		<div><img id="loading" src="images/loading.png" style="display:none;width:48px;position: absolute;left:150px;top:50px;"/></div>
	</div>
	
</body>
</html>